<template>
  <div>
    <h1>新闻列表</h1>
    <ul>
      <li v-for="news in newsList" :key="news.id">
        <!-- 方式1 -->
        <!-- <router-link :to="`/news/detail?id=${news.id}&title=${news.title}&content=${news.content}`">{{ news.title }}</router-link> -->
        <!-- 使用 router-link 跳转到新闻详情页 -->
        <span @click="viewDetail(news)">view</span>
        <router-link :to="{
          name: 'NewsDetail',
          query: { id: news.id, title: news.title, content: news.content },
          params: { id: news.id, title: news.title }
        }
          ">
          {{ news.title }}
        </router-link>
      </li>
    </ul>
  </div>
  <div>
    <router-view></router-view>
  </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import { useRouter } from 'vue-router';


const newsList = reactive([
  { id: '1', title: '新闻1', content: '新闻内容1' },
  { id: '2', title: '新闻2', content: '新闻内容2' },
  { id: '3', title: '新闻3', content: '新闻内容3' }
])

interface NewsDetail{
  id: string,
  title: string,
  content: string
}
const router = useRouter()
const viewDetail = (news: NewsDetail) => {
  router.push({
    name: 'NewsDetail',
    query: { id: news.id, title: news.title, content: news.content },
    params: { id: news.id, title: news.title },
  })
}

</script>
<style lang="scss" scoped></style>
